<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Login Page</title>
    <script type="text/javascript" src="/js/jquery-1.11.1-min.js"></script>
    <script type="text/javascript" src="/js/popper.min.js"></script>
    <script type="text/javascript" src="/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <style>
        body {
            background-color: #f8f9fa;
        }
        .login-container {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh; /* 100% viewport height */
        }
        .card {
            width: 300px; /* Adjust the width as needed */
        }
    </style>
    <script>
        $(function (){
            $("#loginBtn").click(function (){
                let userName = $.trim($("#userName").val());
                let password = $.trim($("#password").val());
                if (userName==="" || password==="") {
                    alert("请填写用户名和密码！");
                    return;
                }
                if ("123"!==password){
                    alert("，密码错误！！");
                    return;
                }
                window.location.href = "http://localhost:8080/user/login?userName="+userName;
            });
        });
    </script>
</head>
<body>

<div class="container">
    <div class="row justify-content-center login-container">
        <div class="col-md-4">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h3 class="text-center">Login</h3>
                </div>
                <div class="card-body">
                    <form id="loginForm">
                        <div class="form-group">
                            <label for="userName">Username</label>
                            <input type="text" class="form-control" id="userName" name="username" placeholder="Enter your username" required>
                        </div>
                        <div class="form-group">
                            <label for="password">Password</label>
                            <input type="password" class="form-control" id="password" name="password" placeholder="Enter your password" required>
                        </div>
                        <button type="button" id="loginBtn" class="btn btn-primary btn-block">Login</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


</body>
</html>
